<template>
    <div>
        <NavSwiper
            :data="tabs"
            v-model="currentIndex"
            slideActiveClass="us-scroll-active-line-col"
            slideClass="us-scroll-line-col"
        >
            <template v-slot="{ item }">
                <!--    hack: fix safria 浏览器中切换nav 颜色变化 异常问题                    -->
                <label class="us-nav-tit" :class="{ active: item.channelId === channelId }">{{
                    item.channelName
                }}</label>
            </template>
        </NavSwiper>
    </div>
</template>

<script>
import NavSwiper from 'lottery/components/NavSwiper/NavSwiper';

export default {
  name: 'DuoduocaiH5NewsNav',
  components: {
    NavSwiper,
  },
  data() {
    return {};
  },
  props: {
    tabs: Array,
    channelId: Number,
  },
  mounted() {},
  computed: {
    currentIndex: {
      set(index) {
        this.tabs[index] && `${this.tabs[index].channelId}` && this.changeTabs(this.tabs[index].channelId);
      },
      get() {
        return this.tabs.findIndex((m) => m.channelId === this.channelId);
      },
    },
  },
  methods: {
    // eslint-disable-next-line no-unused-vars
    changeTabs(channelId, index) {
      console.log('🚀 ~ file: newsNav.vue:48 ~ changeTabs ~ channelId:', channelId);
      // if (this.channelId === channelId) return;
      this.$emit('changeTab', channelId);
    },
  },
};
</script>

<style lang="scss">
.us-scroll-line-col:first-of-type {
    margin-left: 20px;
}
.us-scroll-line-col {
    position: relative;
    height: 44px !important;
    text-align: center;
    width: auto !important;
    flex: 1 0 auto;
    margin: 0 12px;
    .us-nav-tit{
      line-height: 44px;
      font-size: 18px;

    }
    .us-nav-tit.active {
        color: #f84848;
        font-size: 18px;
        font-weight: 600;
    }
    .us-nav-tit.active:before {
        position: absolute;
        left: 50%;
        bottom: 0;
        content: "";
        z-index: 2;
        width: 20px;
        height: 5px;
        margin-left: -10px;
        background: url() no-repeat center center;
        background-size: contain;
    }
}

</style>
